<template>
    <div class="container">
        <div class="btnBox">
            <el-button @click="upset" round type="primary" class="btn">{{ state.gameStart ? '重新开始' : '开始游戏' }}</el-button>
            <!-- <el-button @click="testFun" round type="primary" class="btn">+ {{ options.testNum }}</el-button> -->
        </div>

        <div class="gameData">
            <div class="imgBox">
                <img src="../../assets/iu.webp" alt="">
            </div>
            <div class="data">
                步数：{{ state.stepsNumber }}
            </div>
            <div class="data">
                用时： {{ state.one }} : {{ state.two }} : {{ state.three }}
            </div>
            <div class="gameBorder">
                <div class="gameBox">
                    <div v-for="(item, index) in state.numList" class="sBox" :key="index" :id="`sBox${item.index}`"
                        :style="{ 'top': item.top, 'left': item.left }">
                        <!-- {{ item.num }} -->
                        <img :src="getImageUrl(index)" alt="" style="width: 150px;">
                    </div>
                </div>
                <div :class="`rotateBtn${index + 1}`" class="rotateBtn" v-for="(item, index) in 4" :key="index"
                    @click="boxMove(index, true)">
                    <el-icon class="icon">
                        <RefreshRight />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { defineComponent, computed } from "vue";
import { reactive } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import lodash from 'lodash';
import API from "@/apis";
import { testStores } from '@/stores/modules/test';

const options = testStores();
const getImageUrl = ((index: any) => {
    return new URL(`../../assets/background${index + 1}.webp`, import.meta.url).href
    // ../../ assets / background1.webp
})
const isTrue = computed(() => {
    return JSON.stringify(state.numList) === JSON.stringify(state.numListOld)
})
const state = reactive({
    numListOld: [
        {
            index: 0,
            top: '0px',
            left: '0px'
        },
        {
            index: 1,
            top: '0px',
            left: '150px'
        },
        {
            index: 2,
            top: '0px',
            left: '300px'
        },
        {
            index: 3,
            top: '150px',
            left: '0px'
        },
        {
            index: 4,
            top: '150px',
            left: '150px'
        },
        {
            index: 5,
            top: '150px',
            left: '300px'
        },
        {
            index: 6,
            top: '300px',
            left: '0px'
        },
        {
            index: 7,
            top: '300px',
            left: '150px'
        },
        {
            index: 8,
            top: '300px',
            left: '300px'
        },
    ],
    numList: [
        {
            index: 0,
            top: '0px',
            left: '0px'
        },
        {
            index: 1,
            top: '0px',
            left: '150px'
        },
        {
            index: 2,
            top: '0px',
            left: '300px'
        },
        {
            index: 3,
            top: '150px',
            left: '0px'
        },
        {
            index: 4,
            top: '150px',
            left: '150px'
        },
        {
            index: 5,
            top: '150px',
            left: '300px'
        },
        {
            index: 6,
            top: '300px',
            left: '0px'
        },
        {
            index: 7,
            top: '300px',
            left: '150px'
        },
        {
            index: 8,
            top: '300px',
            left: '300px'
        },
    ],
    stepsNumber: 0, // 步数
    flag: null,
    one: '00', // 时
    two: '00', // 分
    three: '00', // 秒
    abc: 0, // 秒的计数
    cde: 0, // 分的计数
    efg: 0, // 时的计数
    gameStart: false, // 游戏是否开始
    
});

const testFun = (async () => {
    // let res = await API.storeAnalysis.getTOPfiveData({ report_id: 8 })
    // console.log(res);
    options.getTestFun()
})
const upset = (async () => {
    state.stepsNumber = 0;
    startHandler();
    state.gameStart = true;
    for(let i = 0; i < 100; i++) {
        // 生成一个 0 - 3的随机数
        let random = Math.floor(Math.random() * 4);
        boxMove(random, false);
    }
})

const boxMove = (index: number, stepFlag: boolean) => {
    if (!state.gameStart) {
        ElMessage({
            type: 'warning',
            message: '请先开始游戏',
        })
        return;
    };
    for (let i = 0; i < state.numList.length; i++) {
        let boxDom: any = document.querySelector(`#sBox${i}`);
        // 第一个按钮
        if (index == 0) {
            if (boxDom.style.top == '0px' && boxDom.style.left == '0px') { // 1
                boxDom.style.top = `0px`;
                boxDom.style.left = `150px`;
                state.numList[i].top = '0px';
                state.numList[i].left = '150px';
            } else if (boxDom.style.top == '0px' && boxDom.style.left == '150px') { // 2
                boxDom.style.top = `150px`;
                boxDom.style.left = `150px`;
                state.numList[i].top = '150px';
                state.numList[i].left = '150px';
            } else if (boxDom.style.top == '150px' && boxDom.style.left == '0px') { // 4
                boxDom.style.top = `0px`;
                boxDom.style.left = `0px`;
                state.numList[i].top = '0px';
                state.numList[i].left = '0px';
            } else if (boxDom.style.top == '150px' && boxDom.style.left == '150px') { // 5
                boxDom.style.top = `150px`;
                boxDom.style.left = `0px`;
                state.numList[i].top = '150px';
                state.numList[i].left = '0px';
            }
        }
        // 第二个按钮 
        else if (index == 1) {
            if (boxDom.style.top == '0px' && boxDom.style.left == '150px') { // 2
                boxDom.style.top = `0px`;
                boxDom.style.left = `300px`;
                state.numList[i].top = '0px';
                state.numList[i].left = '300px';
            } else if (boxDom.style.top == '0px' && boxDom.style.left == '300px') { // 3
                boxDom.style.top = `150px`;
                boxDom.style.left = `300px`;
                state.numList[i].top = '150px';
                state.numList[i].left = '300px';
            } else if (boxDom.style.top == '150px' && boxDom.style.left == '150px') { // 5
                boxDom.style.top = `0px`;
                boxDom.style.left = `150px`;
                state.numList[i].top = '0px';
                state.numList[i].left = '150px';
            } else if (boxDom.style.top == '150px' && boxDom.style.left == '300px') { // 6
                boxDom.style.top = `150px`;
                boxDom.style.left = `150px`;
                state.numList[i].top = '150px';
                state.numList[i].left = '150px';
            }
        }
        // 第三个按钮
        else if (index == 2) {
            if (boxDom.style.top == '150px' && boxDom.style.left == '0px') { // 4
                boxDom.style.top = `150px`;
                boxDom.style.left = `150px`;
                state.numList[i].top = '150px';
                state.numList[i].left = '150px';
            } else if (boxDom.style.top == '150px' && boxDom.style.left == '150px') { // 5
                boxDom.style.top = `300px`;
                boxDom.style.left = `150px`;
                state.numList[i].top = '300px';
                state.numList[i].left = '150px';
            } else if (boxDom.style.top == '300px' && boxDom.style.left == '0px') { // 7
                boxDom.style.top = `150px`;
                boxDom.style.left = `0px`;
                state.numList[i].top = '150px';
                state.numList[i].left = '0px';
            } else if (boxDom.style.top == '300px' && boxDom.style.left == '150px') { // 8
                boxDom.style.top = `300px`;
                boxDom.style.left = `0px`;
                state.numList[i].top = '300px';
                state.numList[i].left = '0px';
            }
        }
        // 第4个按钮
        else if (index == 3) {
            if (boxDom.style.top == '150px' && boxDom.style.left == '150px') { // 5
                boxDom.style.top = `150px`;
                boxDom.style.left = `300px`;
                state.numList[i].top = '150px';
                state.numList[i].left = '300px';
            } else if (boxDom.style.top == '150px' && boxDom.style.left == '300px') { // 6
                boxDom.style.top = `300px`;
                boxDom.style.left = `300px`;
                state.numList[i].top = '300px';
                state.numList[i].left = '300px';
            } else if (boxDom.style.top == '300px' && boxDom.style.left == '150px') { // 8
                boxDom.style.top = `150px`;
                boxDom.style.left = `150px`;
                state.numList[i].top = '150px';
                state.numList[i].left = '150px';
            } else if (boxDom.style.top == '300px' && boxDom.style.left == '300px') { // 9
                boxDom.style.top = `300px`;
                boxDom.style.left = `150px`;
                state.numList[i].top = '300px';
                state.numList[i].left = '150px';
            }
        }
    }
    // 步数加一
    if(stepFlag) {
        state.stepsNumber += 1;
    }
    if (isTrue.value) {
        ElMessageBox.confirm(
            `通关成功, 您的用时为 ${state.one}:${state.two}:${state.three} ,步数为 ${state.stepsNumber} 步`,
            '牛啊牛啊',
            {
                confirmButtonText: '再次挑战',
                cancelButtonText: '取消',
                type: 'success',
            }
        )
            .then(() => {
                upset();
            })
            .catch(() => {
            })
        endHandler();
    }

};
const startHandler = () => {
    state.numList = lodash.cloneDeep(state.numListOld)
    state.gameStart = true;
    state.three = '00';
    state.abc = 0;
    state.two = '00';
    state.cde = 0;
    state.one = '00';
    state.efg = 0;
    state.flag = clearInterval(state.flag)
    state.flag = setInterval(() => {
        if (state.three === 60 || state.three === '60') {
            state.three = '00';
            state.abc = 0;
            if (state.two === 60 || state.two === '60') {
                state.two = '00';
                state.cde = 0;
                if (state.efg + 1 <= 9) {
                    state.efg++;
                    state.one = '0' + state.efg;
                } else {
                    state.efg++;
                    state.one = state.efg;
                }
            } else {
                if (state.cde + 1 <= 9) {
                    state.cde++;
                    state.two = '0' + state.cde;
                } else {
                    state.cde++;
                    state.two = state.cde;
                }
            }
        } else {
            if (state.abc + 1 <= 9) {
                state.abc++;
                state.three = '0' + state.abc;
            } else {
                state.abc++;
                state.three = state.abc;
            }
        }

    }, 1000)
}
const endHandler = () => {
    state.flag = clearInterval(state.flag)
    state.gameStart = false;
}
</script>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
}

.gameData {
    margin: 0px auto;
    width: 480px;
    height: 600px;

    .data {
        display: inline-block;
        width: 160px;
        height: 40px;
        margin: 20px;
        background: #000;
        border-radius: 20px;
        line-height: 40px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        text-indent: 1em;
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
    }
}
.imgBox {
    width: 150px;
    display: inline-block;
    position: absolute;
    left: -190px;
    top: 78px;
    img {
        width: 150px;
    }
}

.gameBorder {
    width: 480px;
    height: 480px;
    padding: 15px;
    // border-radius: 5px;
    background: #000;
    position: relative;
}

.gameBox {
    width: 452px;
    height: 452px;
    // background-image: url('../../assets/background.webp');
    display: flex;
    flex-wrap: wrap;
    border: 1px solid black;
    border-radius: 10px;
    position: relative;

    .sBox {
        position: absolute;
        width: 150px;
        height: 150px;
        border: 1px solid #000;
        // border-radius: 10px;
        // background-image: url('../../assets/background1.webp');
        // background: #000;
        line-height: 150px;
        font-weight: bold;
        font-size: 60px;
        text-align: center;
        transition-duration: 0.1s;
        transition-timing-function: linear;
        box-sizing: border-box;
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
    }
}

.rotateBtn {

    width: 40px;
    height: 40px;
    background: #000;
    position: absolute;
    border-radius: 50%;
    display: flex;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .icon {
        font-size: 30px;
    }
}

.rotateBtn1 {
    top: 145px;
    left: 145px;
}

.rotateBtn2 {
    top: 145px;
    left: 295px;
}

.rotateBtn3 {
    top: 295px;
    left: 145px;
}

.rotateBtn4 {
    top: 295px;
    left: 295px;
}

.btnBox {
    margin: 100px auto;
    width: 100px;

    .btn {
        margin: 0px auto;
        width: 100px;
        background: #000;
    }
}</style>
